<template>
    <view class="wanladvert-container" :style="{ height: windowHeight + 'px' }">
        <video
            v-if="common.adData.openAdverts.type == 'video'"
            :style="{ height: windowHeight + 'px', width: '100%' }"
            id="advertVideo"
            ref="advertVideo"
            :src="common.adData.openAdverts.media ? common.adData.openAdverts.media : ''"
            :direction="0"
            objectFit="fill"
            :controls="false"
            autoplay
            muted
            loop
        >
            <cover-view class="advert-info" :style="{ top: statusBar + 'px' }">预加载系统中...</cover-view>
            <cover-view class="advert-btn" @tap="outBtn" :style="{ bottom: statusBar + 'px' }">跳过 {{ countdown }} </cover-view>
            <!-- 1.1.3升级 后端加载-->
            <cover-image v-if="common.appConfig.guide_logo" class="advert-logo" :style="{ top: statusBar + 'px' }" :src="$wanlshop.oss(common.appConfig.guide_logo, 70, 15, 2, 'transparent', 'png')" />
        </video>
        <view v-else>
            <image
                :style="{ height: windowHeight + 'px', width: '100%' }"
                :src="common.adData.openAdverts.media ? $wanlshop.oss(common.adData.openAdverts.media, 414, 0, 2, 'transparent', 'png') : ''"
                mode="aspectFill"
            />
            <view class="advert-info" :style="{ top: statusBar + 'px' }">预加载系统中...</view>
            <view class="advert-btn" @tap="outBtn" :style="{ bottom: statusBar + 'px' }">跳过 {{ countdown }}</view>
            <!-- 1.1.3升级 后端加载-->
            <image
                v-if="common.appConfig.guide_logo"
                class="advert-logo"
                :style="{ top: statusBar + 'px' }"
                :src="$wanlshop.oss(common.appConfig.guide_logo, 70, 15, 2, 'transparent', 'png')"
                mode=""
            ></image>
        </view>
    </view>
</template>
<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            windowHeight: 0,
            statusBar: 0,
            countdown: 3, // 修改广告倒计时
            cTimer: null,
        };
    },
    computed: {
        ...mapState(["common"]),
    },
    onReady() {
        var wanlsys = this.$wanlshop.wanlsys();
        this.windowHeight = wanlsys.windowHeight;
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(true);
        this.statusBar = wanlsys.top - 4;
        // #endif
        // #ifdef MP
        this.statusBar = wanlsys.top + 5;
        // #endif
        // #ifdef H5
        this.statusBar = 15;
        // #endif
        uni.createVideoContext("advertVideo").hideStatusBar();
    },
    onLoad() {
        uni.getNetworkType({
            success: (res) => {
                if (res.networkType == "none") {
                    uni.redirectTo({
                        url: "/pages/page/no_network",
                        animationType: "fade-in",
                        animationDuration: 200,
                    });
                } else {
                    this.loadExecution();
                }
            },
        });
    },
    methods: {
        loadExecution() {
            /**
             * 获取本地存储中launchFlag的值
             * 若存在，说明不是首次启动，直接进入首页；
             * 若不存在，说明是首次启动，进入引导页；
             */
            try {
                const value = uni.getStorageSync("wanlshop:launch");
                if (value || this.$store.state.common.adData.firstAdverts.length == 0) {
                    if (value == true) {
                        this.startTimer();
                    } else {
                        this.clearTimerGuide();
                    }
                } else {
                    uni.setStorage({
                        key: "wanlshop:launch",
                        data: true,
                        success: (res) => {
                            console.log("存储launchFlag");
                        },
                    });
                    this.clearTimerGuide();
                }
            } catch (e) {
                // error
                uni.setStorage({
                    key: "wanlshop:launch",
                    data: true,
                    success: (res) => {
                        console.log("error时存储launchFlag");
                    },
                });
                this.clearTimerGuide();
            }
            return;
            this.clearTimerIndex();
        },

        outBtn() {
            this.clearTimerIndex();
        },
        outImage() {
            this.clearTimerIndex();
        },
        startTimer() {
            if (this.cTimer == null) {
                this.cTimer = setInterval(() => {
                    this.countdown--;
                    if (this.countdown == 0) {
                        this.clearTimerIndex();
                    }
                }, 1000);
            }
        },
        clearTimerIndex() {
            clearInterval(this.cTimer);
            this.cTimer = null;
            uni.switchTab({
                url: "/pages/index",
            });
        },
        clearTimerGuide() {
            uni.redirectTo({
                url: "/pages/guide",
            });
            clearInterval(this.cTimer);
            this.cTimer = null;
        },
    },
};
</script>

<style lang="scss">
.wanladvert-container {
    position: relative;
    width: 100%;
    overflow: hidden;

    .advert-info {
        position: absolute;
        height: 60rpx;
        width: 170rpx;
        text-align: right;
        line-height: 60rpx;
        right: 30rpx;
        /* #ifdef MP */
        right: 210rpx;
        /* #endif */
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.7);
    }

    .advert-btn {
        position: absolute;
        right: 32rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #ffffff;
        width: 140rpx;
        height: 66rpx;
        line-height: 66rpx;
        text-align: center;
    }

    .advert-logo {
        position: absolute;
        left: 40rpx;
        width: 252rpx;
        height: 56rpx;
    }
}
</style>
